<template>
	<wsPage title="主题发布">
		<div slot="page_operate">
			<Button  @click="goBack"><Icon type="ios-arrow-back"></Icon><span>返回</span></Button>
		</div>
		<wsPanel>
			<template slot="panel_head_title">编辑主题</template>
			<template slot="panel_head_operate">
				<Button type="primary" @click="submit">提交主题</Button>
			</template>
			<div slot="panel_body">
				<div style="width: 420px;height:700px;border:1px solid #ccc;float:left;padding-right: 15px" class="left-side">
					<div class="topic-thumb  row-item ws-middle" style="height:300px;border-bottom: 1px solid #ccc;" @click="topActive">
						<span v-if="form.basic.topType == -1">设置主题</span>
						<img :src="cropper.datas.top.base64" width="100%" height="100%" v-if="form.basic.topType == 1"/>
						<div v-show="form.basic.topType == 2" style="width: 100%;height: 300px;" id="player"></div>
					</div>
					<div class="row-item">
						<Input placeholder="主题名称" v-model="form.basic.name"/>
					</div>
					<div class="row-item">
						<Input placeholder="主题标题" v-model="form.basic.title"/>
					</div>
					<!--主题内容-->
					<div class="topic-thumb row-item content-row" :id="'topic-row' + index" v-for="(item, index) in form.items" @click="rowActive(item, index)">
						<div class="ws-middle" style="height: 60px;" v-if="item.type == -1">
							<span>添加内容</span>
						</div>
						<div v-if="item.type == 1" v-html="item.content" class="topic-detail"></div>
						<!-- <div v-if="item.type == 2" class="ws-middle">
							<span>商品预览还未实现</span>
						</div> -->
						<div v-if="item.type == 2">
							<div v-for="(item,index) in (current.goodsList)" :key="index" style="display:flex;">
								<img :src="item.primaryPicUrl" alt="" style="width:80px;height:80px;">
								<span>商品名:{{item.name}}</span>		
							</div>
						</div>
						<!-- 关联店铺 -->
						<div v-if="item.type == 3" class="ws-middle" v-html="'店铺名称为:'+item.name"></div>															
						<!-- <div v-if="item.type == 3" class="ws-middle" v-html="'店铺名称为:'+assioShop.name"> -->
					</div>
				</div>
				<div style="border:1px solid #ccc;height:700px;margin-left:420px;margin-right:10px;padding: 10px;">
					<div v-show="current.type == 1" class="row-item">
						<ws-upload-cos ref="topUpload" catelog="topic" :show-upload-list="false" :format="['jpg','jpeg','png']" :max-size="2048" :on-success="uploadTopSuccess" :auto-upload="false" :on-file-list="uploadTopFileList">
							<Button>添加图片</Button>
						</ws-upload-cos>
						<Button @click="addTopViedo">添加视频</Button>
					</div>
					<div v-show="current.type == 2 && current.rowType == -1">
						<ButtonGroup class="row-item">
							<Button @click="addItem(1)">添加图文</Button>
							<Button @click="addItem(2)">添加商品</Button>
							<Button @click="addItem(3)">关联店铺</Button>
						</ButtonGroup>
					</div>
					<div v-show="current.type == 2 && current.rowType != -1">
						<ButtonGroup class="row-item">
							<Button @click="delRowItem" v-if="current.rowIndex != 0">删除选项</Button>
						</ButtonGroup>
					</div>
					<div v-show="current.type == 2 && current.rowType == 1">
						<wsEditor class="row-item" :config="editor.config" ref="ue"></wsEditor>
						<div>
							<Button type="primary" @click="saveContent">保存</Button>
							<Button @click="cancelContent">取消</Button>
						</div>
					</div>
					<div v-show="current.type == 2 && current.rowType == 2">
						<div>
							<Alert>可以新打开一个浏览器页面，在 商城->商品管理->商品审核->审核通过 页面查找你所需要的商品,勾选点击 复制编号</Alert>
							<RadioGroup class="row-item" v-model="current.goodsDisplayType">
								<Radio :label="1">单行</Radio>
								<Radio :label="2">双并列</Radio>
								<!--<Radio :label="3">三包围</Radio>-->
							</RadioGroup>
							<Input class="row-item" v-model="current.goodsInfo" type="textarea" :rows="4" placeholder="输入商品编号，多个商品编号请换行"></Input>
							<div>
								<Button type="primary" @click="searchGoods">保存</Button>
								<Button @click="cancelContent">取消</Button>
							</div>
						</div>
					</div>
					<!-- 关联店铺 -->
					<div v-show="current.type == 2 && current.rowType == 3">
						<ws-table :data="table.data" width="700" height="500" ref="table"  @select="chooseHandleChange" @select-all="selectAllDisabled">
							<ws-table-column align="center" type="selection" width="80" fixed="left"></ws-table-column>
							<ws-table-column align="center" prop="shop" label="商户名称"></ws-table-column>
							<ws-table-column align="center" label="商户Logo">
								<template slot-scope="scope">
									<div v-if="null != scope.row.logoImgUrl" style="border: 1px solid #CCCCCC; padding: 3px; ">
										<img :src="scope.row.logoImgUrl" width="60px" height="80px"/>
									</div>
								</template>
							</ws-table-column>
							<ws-table-column align="center" prop="productNum" label="商品数量"></ws-table-column>
							<ws-table-column align="center" prop="favNum" label="粉丝数"></ws-table-column>
							<ws-table-column align="center" prop="linkman" label="联系人"></ws-table-column>
							<ws-table-column align="center" prop="email" label="邮箱"></ws-table-column>
						</ws-table>
						<div>
							<Button type="primary" @click="recvShopOk">保存</Button>
							<Button @click="recvShopCancel">取消</Button>
						</div>
					</div>	
				</div>
			</div>
		</wsPanel>
		<ws-cropper v-model="cropper.show" :img="cropper.imgData" :config="cropper.config" @crop-ok="cropOk"></ws-cropper>
		<!--设置视频的弹框-->
		<wsModal v-model="modal1.show" title="设置视频" @on-ok="modal1Save" :width="600"  @on-cancel="modal1Cancel">
			<div>
				<Input v-model="form.basic.topViedoUrl"></Input>
			</div>
		</wsModal>	
		
		<wsModal v-model="modal2.show" title="发布设置" @on-ok="modal2Save" :width="600"  @on-cancel="modal2Cancel">
			<Form ref="modal2Form" :model="modal2.form" :rules="modal2.validate" :label-width="100">
		        <!-- <FormItem label="发布类型" prop="type" required>
		            <RadioGroup  v-model="form.basic.type">
		                <Radio :label="1">上新</Radio>
		                <Radio :label="2">折扣</Radio>
		            </RadioGroup>
		        </FormItem>
				-->

		        <FormItem label="发布位置" prop="motherTongue" required>
		            <Select  v-model="form.basic.position" placeholder="请选择" @on-change="positionChange">
		                <Option :value="1">Banner区域</Option>
		                <Option :value="2">顶部区域</Option>
		                <Option :value="3">单张图片</Option>
		                <Option :value="4">商品关联</Option>
		            </Select>
		        </FormItem> 
				<FormItem label="主题语言">
		            <Select clearable   v-model="form.basic.languageCode" placeholder="请选择" @on-change="hasChangeLanguage">
		                <Option :value="item.code" v-for="(item,index) in modal2.fields.languages" :key="index">{{item.motherTongue}}|{{item.english}}</Option>
		            </Select>
		        </FormItem>
				<FormItem label="主题分类">
		            <Select clearable   v-model="form.basic.topicCategoryId" placeholder="请选择">
		                <Option :value="item.id" v-for="(item,index) in modal2.fields.topicCategorys" :key="index">{{item.name}}</Option>
		            </Select>
		        </FormItem>
				<FormItem label="主题标签">
					<Input  clearable  type="text" placeholder="请输入主题标签"  v-model="form.basic.tags"></Input>
					<div style="color:red;">格式：(#小众品牌 #精品),多个标签之间用空格隔开</div>
		        </FormItem>
		        <FormItem label="封面图片" required>
		            <ws-upload-cos ref="coverUpload" catelog="topic" :show-upload-list="false" :format="['jpg','jpeg','png']" :max-size="2048" :on-success="uploadCoverSuccess" :auto-upload="false" :on-file-list="uploadCoverFileList">
						<div class="ws-middle" :style="positionStyle" style="border: 1px solid #ccc;cursor: pointer;">
							<span v-if="cropper.datas.cover.base64 == ''">封面图片</span>
							<img :src="cropper.datas.cover.base64" :style="positionStyle" v-if="cropper.datas.cover.base64 != ''"/>
						</div>
					</ws-upload-cos>
					<span style="color:red">图片尺寸比例为{{cropper.config.fixedNumber}}</span>
		        </FormItem>
		    </Form>	
		</wsModal>		
		
	</wsPage>
</template>

<script>
	import Util from '../../../common/util.js';
	import FileUtil from '../../../common/file.js';
	import 'dplayer/dist/DPlayer.min.css';
	import DPlayer from 'dplayer';
	import $ from 'jquery';
	import m from 'malihu-custom-scrollbar-plugin';
    import mw from 'jquery-mousewheel';
    import 'malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css';
    import { Base64 } from 'js-base64';

	export default {
		data() {
			return {
				editor: {
					config: {
						initialFrameWidth: 600,
						initialFrameHeight: 350
					}
				},
				cropper: {
					show: false,
					datas: {
						top: {
							base64: ''
						},
						cover: {
							base64: ''
						}
					},
					config: {
						fixedNumber: [16, 9],
						// 只有自动截图开启 宽度高度才生效
						autoCropWidth: 480,
						autoCropHeight: 270,
					}
				},
				modal1: { //设置视频
					show: false,
					player: {
						dp: null //播放器
					}
				},
				modal2: { //主题发布
					show: false,
					fields: {
						languages: [],
						topicCategorys:[]
					}
				},
				form: {
					basic: {
						id: '', //主题编号
						type: 1, //类型1.上新 2.折扣
						topType: -1, //1.图片 2.视频
						coverImgUrl: '', //封面图
						position: 1, //位置
						name: '', //主题名称
						title: '', //主题标题
						topUrl: '', //顶部URL
						topViedoUrl: '',
						languageCode: 'zh',
						topicCategoryId:-1, //主题分类id
						tags:'' ,//主题标签
					},
					items: []
				},
				current: {
					type: -1, //-1.无 1.顶部 //2.主题项
					rowType: -1, //-1无 1.图文 2.商品
					rowIndex: -1, //编辑行为-1
					goodsDisplayType: 1, //1.单列 2.2个并列 3.三个展示
					goodsInfo: '',
					goodsList:[],//保存关联的商品列表
				},
				table:{
					page:{
						total:0,
						pageSize:10,
						pageNum:1,
					},
					data:[]
				},
				//条件查询
				queryForm: {
					shop: '',
					linkman: '',
					telephone: '',
					status: 2
				},
				assioShop:{
					tenantId:'' ,//关联店铺的id
					name:'',//关联店铺的name
				},

			}
		},
		computed: {
			/**
			 * 计算样式
			 */
			positionStyle() {
				return 'width:' + this.cropper.config.autoCropWidth + 'px;height:' + this.cropper.config.autoCropHeight + 'px;'
			}
		},
		mounted() {
			this.form.basic.id = this.$route.query.topicId;
			this.initTopic();
			this.initLanguages();
			this.getShopList();
			this.hasChangeLanguage();
		},
		methods: {
			/**
			 * 初始化主题信息
			 */
			initTopic() {
				let _this = this;
				let topicId = this.form.basic.id;
				this.axios.get('/ws/ops/v2/topics/' + topicId).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.buildFromTopicData(res.data);
						_this.hasChangeLanguage();
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 构建主题数据
			 */
			buildFromTopicData(data) {
				console.log(data);
				let topic = data.topic;  //主题基本信息
				let items = data.items; //主题条目item
				this.form.basic.id = topic.id;
				this.form.basic.type = topic.type;
				this.form.basic.topType = topic.topType;
				this.form.basic.coverImgUrl = topic.coverImgUrl;
				this.form.basic.position = topic.position;
				this.form.basic.name = topic.name;
				this.form.basic.title = topic.title;
				this.form.basic.topUrl = topic.topUrl;
				this.form.basic.languageCode = topic.languageCode;

				this.form.basic.tags=topic.tags;  //主题标签
				this.form.basic.topicCategoryId=topic.topicCategoryId; //主题分类id
				// console.log(topic.topType);
				if(2 == topic.topType) {
					//视频
					this.form.basic.topViedoUrl = topic.topUrl;					
					this.switchPlayer();
				} else if(1 == topic.topType) {
					// 图片
					this.cropper.datas.top.base64 = topic.topUrl;
				}
				//计算发布类型
				this.positionChange(topic.position);
				
				this.cropper.datas.cover.base64 = topic.coverImgUrl;
				
				//构建主题项
				for(let i = 0; i < items.length; i++) {
					let item = items[i];
					
					
					let itemInfo = {
						type: item.item.type,
						content: item.item.content,
						displayType: item.item.displayType,				
					};
					
					if(item.products) {
						let products = item.products;
						let goodsInfo = '';
						for(let j = 0; j < products.length; j++) {
							if(0 != j) {
								goodsInfo += ',';
							}
							let key = products[j].productId + "-" + products[j].tenantId;
							let str = Base64.encode(key);
							goodsInfo += str;
						}
						itemInfo.goodsInfo = goodsInfo;
					}

					// 如果关联商品
					if(item.goods) {
						itemInfo.goods = item.goods;
						this.current.goodsList=item.goods;  //关联的商品
						console.log(this.current.goodsList)
					}

					// 是否关联店铺--type=3
					if(item.merchant){
						// this.form.items[i]={};						
						// this.form.items[i].name=item.merchant.shop;
						itemInfo.name=item.merchant.shop;
						itemInfo.tenantId=item.merchant.tenantId;
						this.assioShop.tenantId=item.merchant.tenantId;
					}

					
					this.form.items.push(itemInfo);
				}
				if(!this.init()) {
					this.initScroll();
				}
			},
			init() {
				//判断最后一个是否已经是待处理的
				let itemsLength = this.form.items.length;
				if(itemsLength > 0) {
					let lastItem = this.form.items[itemsLength - 1];
					if(-1 == lastItem.type) {
						return false;
					}
				}
				
				//当前为空项
				this.form.items.push({
					type: -1
				});
				this.initScroll();
				
				return true;
			},
			/**
			 * 初始化滚动条
			 */
			initScroll() {
				this.$nextTick(function() {
					$('.left-side').mCustomScrollbar("destroy");
					$('.left-side').mCustomScrollbar({
	                     theme:"minimal-dark",
	                     scrollInertia : 500
	                }); 
				});
			},
			/**
			 * 初始化可翻译的语言列表
			 */
			initLanguages() {
				let _this = this;
				this.axios.get('/ws/ops/v2/languages/translatable').then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.modal2.fields.languages = res.data;
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},			
			/**
			 * 添加子项
			 */
			addItem(type) {
				this.current.rowType = type;
				let index = this.current.rowIndex;
				this.form.items[index].type = type;
			},
			/**
			 * 激活主题图片设置
			 */
			topActive() {
				this.current.type = 1;
			},
			/**
			 * 激活当前行
			 */
			rowActive(item, index) {
				this.current.rowIndex = index;
				this.current.type = 2;
				if(item.type == -1) {
					//待添加
					this.current.rowType = -1;
				} else {
					//编辑
					this.current.rowType = item.type;
					if(1 == item.type) {
						//图文内容
						let content = this.form.items[index].content;
						this.$refs['ue'].setUEContent(content);
					} else if(2 == item.type) {
						//商品信息
						let goodsType = this.form.items[index].displayType;
						let goodsInfo = this.form.items[index].goodsInfo;
						this.current.goodsDisplayType = goodsType;
						this.current.goodsInfo = goodsInfo;
					}else if(3==item.type){
						// 关联店铺---打卡弹出框
						// this.modal3.show=true;
						let name=this.form.items[index].name;
						let goodsType = this.form.items[index].displayType;
						this.current.goodsDisplayType = goodsType;
						this.current.rowType = 3;
					}
				}
			},
			/**
			 * 保存文本
			 */
			saveContent() {
				let content = this.$refs['ue'].getUEContent();
				let index = this.current.rowIndex;
				this.form.items[index].content = content;
				this.init();
				this.$refs['ue'].setUEContent('');
				this.current.type = -1;
				this.current.rowType = -1;
			},
			/**
			 * 添加顶部图片
			 */
			addTopImg(result) {
				this.cropper.imgData = result;
				this.cropper.show = true;
			},
			/**
			 * 顶部图片选择返回
			 */
			uploadTopFileList(fileList) {
				let _this = this;
				let newFile = fileList[0];
				FileUtil.readFile(newFile, function(result, currFile) {
					_this.cropper.config.action = 1; //顶部图片
					_this.cropper.config.fixedNumber = [16,9];
					_this.cropper.config.autoCropWidth = 480;
					_this.cropper.config.autoCropHeight = 270;
					
					_this.addTopImg(result);
				});
			},
			/**
			 * 截图OK
			 */
			cropOk(data) {
				let action = data.action;
				let imgBase64Data = data.data;
				if(1 == action) {
					//顶部设置
					this.form.basic.topType = 1;
					this.cropper.datas.top.base64 = imgBase64Data;
					this.form.basic.topUrl = '';
				} else if(2 == action) {
					//封面图
					this.cropper.datas.cover.base64 = imgBase64Data;
					this.form.basic.coverImgUrl = ''; //重置为空
				}
				
				this.cropper.imgData = data;
			},
			/**
			 * 显示视频弹框
			 */
			addTopViedo() {
				this.modal1.show = true;
			},
			/**
			 * 视频弹框保存
			 */
			modal1Save() {
				let viedoUrl = this.form.basic.topViedoUrl;
				if(Util.vad.isBlank(viedoUrl)) {
					this.$Message.info('请设置视频地址');
					return;
				}
				this.form.basic.topType = 2;
				this.modal1.show = false;
				
				this.switchPlayer();
			},
			/**
			 * 播放视频
			 */
			switchPlayer() {
				let viedoUrl = this.form.basic.topViedoUrl;
				this.$nextTick(function() {
					const dp = new DPlayer({
						container: document.getElementById('player'),
						video: {
							url: viedoUrl,
							pic: 'https://api.vtrois.com/image/600x280?text=Allsale'
						},
						hotkey: false
					});
					this.modal1.player.dp = dp;
				});
			},
			/**
			 * 视频弹框取消
			 */
			modal1Cancel() {
				this.form.basic.topViedoUrl = '';
				this.modal1.show = false;
			},
			delRowItem() {
				let index = this.current.rowIndex;
				this.form.items.splice(index, 1);
				this.current.type = -1;
				this.current.rowType = -1;
			},
			/**
			 * 取消内容输入
			 */
			cancelContent() {
				this.current.type = -1;
				this.current.rowType = -1;
				let index = this.current.rowIndex;
				this.form.items[index].type = -1;
			},
			/**
			 * 查询商品
			 */
			searchGoods() {
				let data = this.current.goodsInfo;
				if(Util.vad.isBlank(data)) {
					this.$Message.info('请填写商品编号');
					return;
				}
				let dataArrys = data.split(',');
				let _this = this;
				this.axios.post('/ws/ops/v2/goods/search', dataArrys).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.buildSearchGoodsData(res.data);
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('查询商品失败:' + message_);
					}
				});
			},
			buildSearchGoodsData(datas) {
				this.current.goodsList=datas;
				if(datas.length == 0) {
					this.$Message.warning('没有关联商品');
					return;
				}
				
				let index = this.current.rowIndex;
				let goodsType = this.current.goodsDisplayType;
				let goodsInfo = this.current.goodsInfo;
				this.form.items[index].goods = datas;
				this.form.items[index].displayType = goodsType;
				this.form.items[index].goodsInfo = goodsInfo;
				//需要做判断
				this.init();
				this.current.type = -1;
				this.current.rowType = -1;
				
				this.current.goodsDisplayType = 1;
				this.current.goodsInfo = '';
			},
			/**
			 * 提交主题
			 */
			submit() {
				if(this.vadTopic()) {
					return;
				}
				this.modal2.show = true;
			},
			/**
			 * 校验主题
			 */
			vadTopic() {
				if(-1 == this.form.basic.topType) {
					this.$Message.info('请设置主题顶部');
					return true;
				}
				if(Util.vad.isBlank(this.form.basic.name)) {
					this.$Message.info('主题名称必须填写');
					return true;
				}
				let items = this.form.items;
				if(items.length == 0) {
					this.$Message.info('请添加主题内容哦');
					return true;
				}
				let goodsLength = 0;
				let topicContentLength = 0;
				for(let i = 0; i < items.length; i++) {
					let item = items[i];
					if(item.type == 1) {
						if(Util.vad.isBlank(item.content)) {
							this.$Message.info('请设置主题详情');
							return true;
						}
						topicContentLength++;
					} else if(item.type == 2) {
						goodsLength += item.goods ? item.goods.length : 0;
					}
				}
//				if(0 == topicContentLength) {
//					this.$Message.info('请添加主题图文详情');
//					return true;
//				}
				if(0 == goodsLength) {
					this.$Message.info('主题必须关联商品信息');
					return true;
				}
				return false;
			},
			/**
			 * 发布主题保存
			 */
			modal2Save() {
				let coverImgBase64 = this.cropper.datas.cover.base64;
				let currentLanguage= this.form.basic.languageCode;
				let currentTopicCategory=this.form.basic.topicCategoryId;
				let currentTopicTags=this.form.basic.tags;
				if(Util.vad.isBlank(currentLanguage)){
					this.$Message.info('必须选择语言');
					return;
				}else if(Util.vad.isBlank(currentTopicCategory)){
					this.$Message.info('必须选择主题分类');
					return;
				}
				else if(Util.vad.isBlank(currentTopicTags)){
					this.$Message.info('请填写主题标签');
					return;
				}
				else if(Util.vad.isBlank(coverImgBase64)) {
					this.$Message.info('封面图必须上传');
					return;
				}
				//1.保存
				this.saveTopic();
			},
			/**
			 * 构建主题数据
			 */
			buildTopicData() {
				let postData = {
					topic: this.form.basic,
					items: [],

				};
				
				//保存视频
				if(2 == this.form.basic.topType) {
					let viedoUrl = this.form.basic.topViedoUrl;
					postData.topic.topUrl = viedoUrl;
				}
				
				let formItems = this.form.items;
				let items = [];
				for(let i = 0; i < formItems.length; i++) {
					let formItem = formItems[i];
					if(formItem.type == -1) {
						continue;
					}
					let itemVO = {
						item: {},
						products: []
					};
					itemVO.item.type = formItem.type;
					itemVO.item.content = formItem.content;
					itemVO.item.displayType = formItem.displayType;
					
					let goods = formItem.goods;
					if(goods) {
						let itemGoods = [];
						for(let j = 0; j < goods.length; j++) {
							itemGoods.push({
								productId: goods[j].id,
								tenantId: goods[j].tenantId
							});
						}
						itemVO.products = itemGoods;
					}
					items.push(itemVO);


					if(this.assioShop.tenantId&&formItem.type==3){
						itemVO.merchantDO={};
						itemVO.merchantDO.tenantId=this.assioShop.tenantId;
					}

				}
				postData.items = items;
				return postData;
			},
			/**
			 * 保存主题到数据库
			 */
			saveTopic() {
				let _this = this;
    			let postData = this.buildTopicData();
				console.log(postData);
				this.axios.put('/ws/ops/v2/topic', postData).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.saveCoverImg();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('发布主题失败:' + message_);
					}
				});
			},
			/**
			 * 保存主题图片
			 */
			saveTopicImg() {
				let topType = this.form.basic.topType;
				//顶部图片地址为空
				if(1 == topType && Util.vad.isBlank(this.form.basic.topUrl)) {
					let data = this.cropper.datas.top.base64;
					let fileName = "topic_" + new Date().getTime() + '.jpg';
					let newFile = FileUtil.dataURLtoFile(data, fileName);
					this.$refs.topUpload.execUpload([newFile]);
				} else {
					//更新提示
					this.saveTopicSuccess();
				}
			},
			/**
			 * 保存封面图
			 */
			saveCoverImg() {
				if(Util.vad.isBlank(this.form.basic.coverImgUrl)) {
					//只有为空说明需要上传图片
					let data = this.cropper.datas.cover.base64;
					let fileName = "topic_" + new Date().getTime() + '.jpg';
					let newFile = FileUtil.dataURLtoFile(data, fileName);
					this.$refs.coverUpload.execUpload([newFile]);
				} else {
					this.saveTopicImg();
				}
			},	
			saveTopicSuccess() {
				this.$Message.info('主题发布成功');
				this.modal2.show = false;
				this.$router.push({name: 'ops_topic_list'});
			},
			/**
			 * 顶部图片上传成功
			 */
			uploadTopSuccess(response, file, fileList) {
				let _this = this;
				if(0 == response.meta.code) {
					console.log(response.data);
					let postData = {
						id: this.form.basic.id,
						topUrl: response.data.Location
					};
					this.updateTopicBasic(postData, function() {
						_this.saveTopicSuccess();
					});
				}
			},
			/**
			 * 封面图上传成功
			 */
			uploadCoverSuccess(response, file, fileList) {
				let _this = this;
				if(0 == response.meta.code) {
					console.log(response.data);
					let postData = {
						id: this.form.basic.id,
						coverImgUrl: response.data.Location
					};
					this.updateTopicBasic(postData, function() {
						_this.saveTopicImg();
					});
				}
			},		
			/**
			 * 更新主题信息
			 */
			updateTopicBasic(postData, callback) {
				let _this = this;

				this.axios.put('/ws/ops/v2/topic/basic', postData).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						callback();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('发布主题失败:' + message_);
					}
				});
			},
			/**
			 * 发布主题取消
			 */
			modal2Cancel() {
				this.modal2.show = false;
			},
			/**
			 * 位置改变
			 */
			positionChange(val) {
				this.cropper.datas.cover.base64 = '';
				switch(val) {
					case 1: //banner
						this.cropper.config.fixedNumber = [16,9];
						this.cropper.config.autoCropWidth = 480;
						this.cropper.config.autoCropHeight = 270;
					break; //推荐
					case 2:
						this.cropper.config.fixedNumber = [16,9];
						this.cropper.config.autoCropWidth = 480;
						this.cropper.config.autoCropHeight = 270;
					break;
					case 3: //单张
						this.cropper.config.fixedNumber = [16,9];
						this.cropper.config.autoCropWidth = 480;
						this.cropper.config.autoCropHeight = 270;
					break;
					case 4: //关联商品
						this.cropper.config.fixedNumber = [16,9];
						this.cropper.config.autoCropWidth = 480;
						this.cropper.config.autoCropHeight = 270;
					break;
				}
			},
			/**
			 * 封面图片
			 */
			uploadCoverFileList(fileList) {
				let _this = this;
				let newFile = fileList[0];
				FileUtil.readFile(newFile, function(result, currFile) {
					_this.cropper.config.action = 2; //封面图片
					_this.addTopImg(result);
				});
			},
			/**
             * 返回
             */
            goBack() {
    			this.$router.push({name: 'ops_topic_list'});
			},
			/**
				切换语言--选择对应的主题分类
			 */
			hasChangeLanguage(){
				this.modal2.fields.topicCategorys=[];
				this.form.basic.topicCategoryId='';
				this.axios.get('/ws/ops/topic/categorys?languageCode='+this.form.basic.languageCode).then(response=>{
					let res=response.data;
					console.log(res);
					let resMeta=res.meta;
					if(0==resMeta.code){
						this.modal2.fields.topicCategorys=res.data;
					}else{
						this.$Message.warning(resMeta.message);
					}
				})
			},
			
			/**
				关联店铺---获取店铺列表AssociatedStore
			 */
			getShopList(){
				let pageSize = this.table.page.pageSize;
				let pageNum = this.table.page.pageNum;
				const _this = this;
				this.axios.get('/ws/ms/merchants/' + pageNum + '/' + pageSize,{params:this.queryForm}).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						this.table.data=res.data.list;
						this.table.page.total=res.data.total;
						this.table.page.pageNum=res.data.pageNum;
						this.table.page.pageSize=res.data.pageSize;
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
				
			},

			/**
				保存关联的店铺
			 */
			recvShopOk(){
				// 请选择关联的店铺
				if(this.assioShop.tenantId==''){
					this.$Message.info('请选择关联的店铺');
					return ;
				}
				let index = this.current.rowIndex;
				this.form.items[index].name = this.assioShop.name;

				this.init();
				this.current.type = -1;
				this.current.rowType = -1;				
				// this.current.rowIndex=1; //显示删除选项按钮
			},
			/**
				取消保存关联的店铺
			 */
			recvShopCancel(){
				this.current.type = -1;
			}, 
			/**
				单选店铺
			 */
			chooseHandleChange(selection,row){
                this.$refs.table.clearSelection();
                this.assioShop.tenantId=row.tenantId;
				console.log(this.assioShop.tenantId)
				this.assioShop.name=row.shop;
                this.$refs.table.toggleRowSelection(row,true);
            },
			// 清除全选
			selectAllDisabled(row){
                this.$refs.table.clearSelection();  
            },


		}
	}
</script>

<style>
	.row-item {
		margin-bottom: 10px;
		cursor: pointer;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	
	.topic-thumb {
		background-color: #ccc;
	}
	
	.topic-detail {
		margin: 0 10px;
	}
	
	.topic-detail img {
		width: 100%;
	}
	.topic-detail p {
		word-wrap: break-word;
	}
	
</style>